<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="//unpkg.com/element-ui@2.0.9/lib/theme-chalk/index.css" />
</head>
<body>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.0.9/lib/index.js"></script>
<div id="app">
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
</div>
<script type="text/javascript">
var Main = {
	    data() {
	      return {
	        ddd: "dd",
	        dialogVisible: false,
	      };
	    },
	    methods: {
	      handleClose(done) {
	        this.$confirm('确认关闭？')
	          .then(_ => {
	            done();
	          })
	          .catch(_ => {});
	      }
	    }
	  };
	var Ctor = Vue.extend(Main)
	new Ctor().$mount('#app')
</script>
</body>
</html>